// ================================================分页器============================================
let form = layui.form
let layer = layui.layer
// 参数较多，每次发送Ajax请求时都要携带这些参数，比较繁琐，处理为一个对象，方便复用
let query = {
    pagenum: 1,  //是int页码值
    pagesize: 5, //是 int每页显示多少条数据
    cate_id: '', //否 string 文章分类的id
    state: '' //否 string 文章的状态 可选值：已发布、草稿
}
    // =============================================获取首页数据=========================================
    ; (async function () {
        const { data: { data } } = await axios.get('/index/index')
        // console.log(data)
        // ==========================================1.导航列表=========================================
        const navStr = data.allCate.map(item => `
    <li onclick="capture(${item.id})"  class="menu-item menu-item-type-taxonomy menu-item-object-category" data-id=${item.id}><a href="list.html"><span
        class="fa ${item.icon}"></span>${item.catename}</a></li>
    `).join('')
        $(".nav").append(navStr)
        // =========================================2.导航右侧广告=======================================
        // console.log(data.sideBanner);
        const advStr = data.sideBanner.map(item => `
    <a href="${item.advimglink}" rel="nofollow" target="_blank" title="${item.advimgdesc}">
      <img class="g430" style="width:360px;height:133px;" src="http://124.223.14.236:8060/${item.advimgsrc}" alt="${item.advimgdesc}" >
    </a>
    `).join('')
        $(".textwidget").html(advStr)
        // ===========================================3.标签列表========================================
        // console.log(data.allTag)
        const tagStr = data.allTag.map(item => `
    <li data-id=${item.id}><a title="" href="">${item.tagname}</a></li>
    `).join('')
        $("#tags").html(tagStr)
        // ==========================================4.友情链接=========================================
        // console.log(data.allLink)
        const linksStr = data.allLink.map(item => `
    <li>
      <a href="${item.url}"><img src="http://124.223.14.236:8060/${item.img}" alt=""><p>${item.des}</p></a>
    </li>
    `).join('')
        $("#links").html(linksStr)
        // ===========================================5.轮播图============================================
        // 渲染轮播区域
        const bannerStr = data.banner.map(item => `
    <div class="swiper-slide">
        <a target="_blank" href="${item.advimglink}">
            <img class="thumb" src="http://124.223.14.236:8060/${item.advimgsrc}" style="width: 860px;height: 300px">
            <h4>${item.advimgdesc}</h4>
        </a>
    </div>
    `).join('')
        $(".swiper-wrapper").html(bannerStr)
        let mySwiper = new Swiper('.swiper', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: {
                delay: 3000,//1秒切换一次
            },
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                // type:'custom'
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }
        })
        //鼠标移出隐藏按钮，移入显示按钮
        mySwiper.el.onmouseover = function () {
            mySwiper.navigation.$nextEl.removeClass('hide');
            mySwiper.navigation.$prevEl.removeClass('hide');
        },
            mySwiper.el.onmouseout = function () {
                mySwiper.navigation.$nextEl.addClass('hide');
                mySwiper.navigation.$prevEl.addClass('hide');
            }
        // ===========================================6.底部链接============================================
        // console.log(data.allLink);
        const linkBtm = data.allLink.map(item => `
        <a href="${item.url}" title="${item.des}">${item.des}</a> <span>|</span>
        `).join('')
        $(".link").html(linkBtm)
    })()
    // ==============================================热门推荐============================================
    ; (async function () {
        const { status, data: { data } } = await axios.get('/index/hot')
        // console.log(data.list)
        const hotStr = data.list.map(({ title, pic, id }) =>
            `<li class="item" data-id=${id}><a target="_blank" href="show.html?${id}" class"remen"><img src="http://124.223.14.236:8060/${pic}" class="thumb" style='width:100%'/>${title}</a></li>`
        ).join('')
        $('#hot').html(hotStr)
    })()


    // =============================================侧边热门文章============================================
    ; (async function () {
        const { status, data: { data } } = await axios.get('/index/recommend')
        const hotArt = data.list.map(item => `
        <li data-id=${item.id}>
            <a target="_blank" href="">
                <span class="thumbnail">
                    <img src="http://124.223.14.236:8060/${item.pic}" class="thumb" />
                </span>
                <span class="text">${item.title}</span>
                <span class="text-muted post-views">阅读(${item.click})</span>
            </a>
        </li>
    `).join('')
        $(".items-02").html(hotArt)

    })()

// ==========================================最近更新-首页大列表============================================
let total
let dataBase = {
    page: 1,
    limit: 10
}

    
    ; (async function () {
        const { data: { data:{list:{data}}}} = await axios.get('/index/new')
        console.log(data);
        document.querySelector('.article').innerHTML = data.map(({ author, catename, click, create_name, description, lovenum, pic, tags, title,id }) => {
            return `
           <article class="excerpt excerpt-one">
            <header>
              <a class="cat label label-important" href="">${catename}<i class="label-arrow"></i></a>
              <h2>
                <a target="_blank" href="./show.html?id=${id} "  title="${title}">${title}</a>
              </h2>
            </header>
            <p class="text-muted time">
              <a href="">${author}</a> 发布于 2018-03-30
            </p>
            <p class="focus">
              <a target="_blank" href="http://blog.weknow.cn/474.shtml" class="thumbnail">
                <span  class="item"><span class="thumb-span"><img  src="http://124.223.14.236:8060/${pic}"  class="thumb" /></span></span></a>
              </p>
            <p class="note">${description}</p>
            <p class="text-muted views">
              <span class="post-views">阅读(${click})</span>
              <span class="post-comments">评论(0)</span>
              <a href="javascript:;" class="post-like">
                <i class="fa fa-thumbs-up"></i>赞 (<span>${lovenum}</span>)
              </a>
              <span class="post-tags">标签：
                <a href=""  rel="tag">${tags}</a> / 
                <a href=""  rel="tag">阿里云</a></span>
             </p>
          </article>
            `
        }).join('')
    })()
// -----------------------------------------分页期----------------------------------
let laypage = layui.laypage;
renderPage()
function renderPage(total) {
    laypage.render({
        elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
        count: total, //数据总数，从服务端得到
        limit: query.pagesize, //每页显示的条数
        // limits: [1, 2, 3, 4, 5],  //每页条数的选择项
        curr: query.pagenum,  //起始页
        layout: ['prev', 'page', 'next', 'count',],  //自定义排版
        jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数
            query.pagenum = obj.curr
            //首次不执行
            if (!first) {
                //do something
                // getartList()
            }
        }
    });
}
function capture(data) {
    localStorage.setItem('onlyListId', data)
}



// 点击最近更新里面的文章跳转到show页面
// $('.articleList').on('click', '.clickA', function () {
//     let showId = $(this).parents('article').attr('data-id')
//     console.log(showId);
//     localStorage.setItem('show-id', showId)
// })
// 点击热门推荐里面的图片跳转到show页面
$('.sticky ul').on('click', '.remen', function () {
    let showId = $(this).attr('data-id')
    localStorage.setItem('show-id', showId)
})

// $('.article').on('click', '.ooo', function (e) {
//     let id = $(this).attr('data-id')
//     e.preventDefault()
//     console.log(id);
//     location.href = '/show.html?id=' + id
// })



// ===========分页

function renderPage(count) {
    //执行一个laypage实例
    laypage.render({
        elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
        count,//数据总数，从服务端得到
        limit: dataBase.limit,
        limits: [10, 20, 50, 80, 100],
        curr: dataBase.page,
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
        jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数
            // console.log(first)
            dataBase.page = obj.curr
            dataBase.limit = obj.limit
            //首次不执行
            if (!first) {
                //do something
                // console.log('a');
                getartList()
            }
        }
    });
}
// $('.article').on('click', '.indexid', function () {
//     let id = $this.attr('data-id')
//     console.log(id);
//     location.href = '/show.html?id=' + id
// })
// $('.article').on('click', '.ooo', function (e) {
//     let id = $(this).attr('data-id')
//     e.preventDefault()
//     console.log(id);
//     location.href = '/show.html?id=' + id
// })